<template>
  <view class="cc-tab-container">
    <scroll-view :scroll-x="false" class="tabs-wrapper" :scroll-with-animation="true">
      <view class="fit-tabs-box"
        :style="{transform: scrollDirection === 'down' ? `scale(1)` : `scale(0.5)`, opacity: scrollDirection === 'down' ? '1' : '0', transition: scrollDirection === 'down' ? 'transform 0.2s linear 0.2s, opacity 0.2s linear 0.2s' : 'transform 0.2s linear, opacity 0.2s linear'}">
        <!-- 判断是否选中，选中设置样式 -->
        <!-- switchTab -->
        <view class="tab-item" v-for="(item, index) in tabList"
          :style="{color: index === currentTab ? '#000' : '', 'font-weight':  index === currentTab ? '600' : '', 'font-size': index === currentTab ? is_MovefSize ? current_fSize + 'rpx' : selected_fSize + 'rpx' : is_MovefSize ? other_fSize + 'rpx' : unselected_fSize + 'rpx'}"
          :key="index" @click="ClickTab(index)">
          <slot name="tab" :tabItem="item"></slot>
        </view>
      </view>
    </scroll-view>
    <view class="sub-tab-content" style="height: 100%;overflow: hidden" @touchstart="touchStart" @touchmove="touchMove"
      @touchend="touchEnd">
      <swiper class="swiper-wrapper"
        :style="{'margin-top': scrollDirection === 'down' ? `${tab_Height}rpx` : '0',transition: scrollDirection === 'down' ? 'all 0.4s ease-out' : 'all 0.4s ease-in'}"
        :current="currentTab" :duration="300" @change="ChangeSwiper">
        <swiper-item class="swiper-item-box" v-for="(item, index) in tabList" :key="index">
          <slot :name="item.name"></slot>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  export default {
    props: {
      tabList: {
        type: Array,
        default: [],
        required: true
      },
      // 滑动方向重置 Tab 位置
      scrollY: {
        type: String,
        default: 'down'
      }
    },
    computed: {
      ...mapState("m_app", ["screen_Width"])
    },
    watch: {
      scrollY: function() {
        this.scrollDirection = 'down'
      }
    },
    data() {
      return {
        currentTab: 0, //当前标签索引
        tab_Height: 110, //标签栏高度
        selected_fSize: 44, // 选中标签字体初始大小
        unselected_fSize: 36, // 未选中标签字体初始大小

        touchStart_X: 0, // 触摸开始坐标 X
        touchStart_Y: 0, // 触摸开始坐标 Y
        touchMove_X: 0, // 水平滑动距离
        touchMove_Y: 0, // 垂直滑动距离
        current_fSize: 44, //当前标签索引字体大小
        other_fSize: 36, //其他标签索引字体大小
        origin_fSizeDiff: 0,
        is_MovefSize: false, //控制是否是左右滑动切换时字体大小动态变化，防止切换后标签索引变化导致 current，other字体大小不对应而突变
        tab_TranslateY: 0,
        tab_TotalTranslateY: 0,
        touchMove_Y: 0,
        preTouchMove_X: 0,
        preTouchMove_Y: 0,
        moveCount: 0, //touchmove 触发次数
        moveDirection: '', // 滑动方向：水平horizon，垂直vertical
        scrollDirection: 'down',
      }
    },
    mounted() {
      this.origin_fSizeDiff = this.selected_fSize - this.unselected_fSize
    },
    methods: {
      // 点击 Tab 标签
      ClickTab: function(index) {
        this.$emit('click-tab', this.currentTab, index)

        this.currentTab = index
        this.tab_TranslateY = 0
        this.tab_TotalTranslateY = 0
      },
      // 切换 Swiper 项
      ChangeSwiper: function(e) {
        if (e.detail.source === '') return

        this.$emit('change-swiper', e.detail.current)

        this.currentTab = e.detail.current
      },

      // swipper 左右切换
      touchStart: function(e) {
        this.touchStart_X = e.changedTouches[0].pageX
        this.touchStart_Y = e.changedTouches[0].pageY
        this.preTouchMove_X = e.changedTouches[0].pageX
        this.preTouchMove_Y = e.changedTouches[0].pageY
      },
      touchEnd: function(e) {
        this.is_MovefSize = false
        this.moveCount = 0
        this.current_fSize = 44
        this.other_fSize = 36

        this.tab_TotalTranslateY += Math.round(this.touchMove_Y * (750 / this.screen_Width))
        if (this.tab_TotalTranslateY > 0) {
          this.tab_TotalTranslateY = 0
        } else if (this.tab_TotalTranslateY < -this.tab_Height) {
          this.tab_TotalTranslateY = -this.tab_Height
        }
        this.touchMove_X = 0
        this.touchMove_Y = 0
      },
      touchMove: function(e) {
        const moveDiffX = e.changedTouches[0].pageX - this.preTouchMove_X
        const moveDiffY = e.changedTouches[0].pageY - this.preTouchMove_Y
        this.touchMove_X += moveDiffX
        this.touchMove_Y += moveDiffY

        // 获得手指滑动方向
        this.calculateMoveDirection(5, this.touchMove_X, this.touchMove_Y)

        if (this.moveDirection == 'horizon') {
          // 水平滑动
          // 播放动态字体大小
          this.playDynamicsFontSize(this.touchMove_X)
        } else if (this.moveDirection == 'vertical') {
          // 垂直滑动
          if (moveDiffY > 0) {
            this.scrollDirection = 'down'
          } else if (moveDiffY < 0) {
            this.scrollDirection = 'up'
          }
        }

        this.preTouchMove_X = e.changedTouches[0].pageX
        this.preTouchMove_Y = e.changedTouches[0].pageY
      },

      // 进行动态字体大小的效果
      // params: moveX：水平滑动距离
      playDynamicsFontSize: function(moveX) {
        this.is_MovefSize = true

        if (moveX > 0) {
          if (this.currentTab !== 0) {
            // 当前索引不在 0 上且右滑
            this.current_fSize = Math.max(Math.round(this.selected_fSize - (moveX * 2 / this.screen_Width) * this
              .origin_fSizeDiff), this.unselected_fSize)
            this.other_fSize = Math.min(Math.round(this.unselected_fSize + (moveX * 2 / this.screen_Width) * this
              .origin_fSizeDiff), this.selected_fSize)
          } else return
        } else if (moveX < 0) {
          // 当前索引不在最后一项上且左滑
          if (this.currentTab !== this.tabList.length - 1) {
            this.current_fSize = Math.max(Math.round(this.selected_fSize - (-moveX * 2 / this.screen_Width) * this
              .origin_fSizeDiff), this.unselected_fSize)
            this.other_fSize = Math.min(Math.round(this.unselected_fSize + (-moveX * 2 / this.screen_Width) * this
              .origin_fSizeDiff), this.selected_fSize)
          } else return
        }
      },

      // 进行动态 Tab 栏粘性定位
      // params: moveY：垂直滑动距离
      playDynamicsTabStiky: function(moveY) {
        if (this.tab_TranslateY <= -this.tab_Height && moveY > 0) {
          this.$emit('transition')
        }
        if (this.tab_TranslateY >= 0 && moveY < 0) {
          this.$emit('transition')
        }

        this.tab_TranslateY = this.tab_TotalTranslateY + Math.round(moveY * (750 / this.screen_Width))

        if (this.tab_TranslateY > 0) {
          this.tab_TranslateY = 0
          this.$emit('unTransition')
        } else if (this.tab_TranslateY < -this.tab_Height) {
          this.tab_TranslateY = -this.tab_Height
          console.log('ok');
          this.$emit('unTransition')
        } else {
          this.$emit('transition')
        }

      },

      // 根据 touchMove 触发次数判断手指滑动方向
      // params: maxCount 触发次数，moveX，moveY：触摸移动距离
      calculateMoveDirection: function(maxCount, moveX, moveY) {
        // 未达到最大次数
        if (this.moveCount < maxCount) {
          this.moveCount++
          // 等于最大次数
          if (this.moveCount === maxCount) {
            const mX = Math.abs(moveX)
            const mY = Math.abs(moveY)

            if (mX > mY) {
              return this.moveDirection = 'horizon'
            } else {
              return this.moveDirection = 'vertical'
            }

          } else {
            return 0
          }

        } else {
          // 超出最大次数
          return 0
        }
      }
    }
  }
</script>

<style lang="scss">
  .cc-tab-container {
    overflow: hidden;
    position: relative;
    height: 100%;

    .tabs-wrapper {
      position: absolute;
      top: 0;
      width: 100%;

      .fit-tabs-box {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        .tab-item {
          color: #00000080;
          font-size: 36rpx;
          transition: font-size 0.3s ease;
        }
      }
    }

    .swiper-wrapper {
      height: 100%;
      transition: margin 1s ease;

      .swiper-item-box {
        .swiper-item {
          width: 100%;
          height: 100%;

          .inner-mask {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>